<template>
	<div>
	  	<van-nav-bar
		  title="提交凭证"
		  left-arrow	
		  @click-left="onClickLeft"
		  >		
			<van-icon name="arrow-left" slot="left" color="#000" size="20" />
	    </van-nav-bar>	 
	    
	    
	    <div class="wrap">
	    	<div style="color: #999;font-size: 15px;margin-bottom: 30px;">请上传凭证并提交,客服将根据您的凭证做出处理。</div>
	    	<div style="margin-bottom: 16px;font-size: 14px;">上传凭证</div>
			<div class="imgList">
				<div v-for="(item,index) in imgList" class="imgContain" :key="index">
					<div class="clear" @click="delImg(index)">
						<img src="../../../../static/img/lanhu/43.png" alt="" style="width: 13px;height: 13px;"/>
					</div>
					<img :src="item" alt=""/>
				</div>
				
                <div v-if="imgList.length<6" @click="getImgUrl(imgList.length,6)" class="imgContain">
                	<img src="../../../../static/img/lanhu2/02.png" alt=""/>
                </div>
			</div>		    	
	    </div>
	    
	    
	    <div class="confirmBtn" @click="confirm">完成举证并提交</div>
	</div>	
</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
          refundId:'',
          imgList:[],             // 用于绑定已上传的图片数组（组件内部使用，在删除图片时用到） 
          url1:this.$api+'/marketorderservice/api/v1/market/updateRefundImg',
          params:{
          	refundImg:'',
          	cid:''
          }
       }
	},
	methods: {
		// 删除图片
		delImg(index){
			this.imgList.splice(index,1)
			this.params.refundImg=this.imgList.join()
		},	    
		// 获取图片地址后的回调
		callJSGetImgUrl(str){
			this.imgList=this.imgList.concat(str.split(','))
			this.params.refundImg=this.imgList.join()
		},
		// 提交
		confirm(){
			if(!this.params.refundImg){
				this.$toast('请上传图片凭证')
				return false
			}
			let that=this
	       	this.$Axios2.Post(this.url1,this.params).then(function(res){ 
              window.history.back(-1); 
	       	}) 	
		}
	},
	mixins:[publicFun],//混入		
	mounted() {
         this.params.cid=this.$router.currentRoute.query.cid;
         
         window.callJSGetImgUrl=this.callJSGetImgUrl         // 挂载获取图片回调方法
	}
}	
</script>

<style scoped="" lang="scss">
.wrap{padding: 20px;}
.imgList:after{content:"";display:block;clear:both;}
.imgList .imgContain{float: left;margin-right: 3%;width:23.5%;margin-bottom: 10px;position: relative;}
.imgList .imgContain img{width: 100%;height: 80px;}
.imgList .imgContain:nth-child(3n){margin-right: 0;}
.clear{position: absolute;right: -6px;top: -6px;z-index: 100;}
.confirmBtn{background: #FFD630;padding: 12px 0;text-align: center;
position: absolute;left: 0;bottom: 0;width: 100%;font-size: 16px;}
</style>